<template>
  <el-dialog title="添加菜单&权限" v-model="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form size="small" :model="formData" :rules="formRules" ref="form">
      <!--菜单名称-->
      <el-form-item label="菜单名称" prop="name" :label-width="formLabelWidth">
        <el-input v-model="formData.name" autocomplete="off" placeholder="请输入菜单名称"></el-input>
      </el-form-item>
      <!--类型-->
      <el-form-item label="类型" prop="name" :label-width="formLabelWidth">
        <el-radio-group v-model="formData.is_route">
          <el-radio :label="1">页面</el-radio>
          <el-radio :label="0">按钮</el-radio>
          <el-radio :label="2">独立单页面</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--上级菜单-->
      <el-form-item label="上级菜单" prop="parent_id" :label-width="formLabelWidth">
        <el-cascader size="small" v-model="parentsVal" :options="accessList" :props="propsParam" @change="handleChange"></el-cascader>
      </el-form-item>
      <!--路径-->
      <el-form-item label="路径" prop="path" :label-width="formLabelWidth">
        <el-input v-model="formData.path" autocomplete="off" placeholder="请输入组件文件路径"></el-input>
        <p>提示：对应前端给的文件路径，例如：/index/index</p>
      </el-form-item>
      <!--图标-->
      <el-form-item label="图标" :label-width="formLabelWidth">
        <el-input v-model="formData.icon" autocomplete="off" placeholder="请输入icon"></el-input>
        <p>提示：请选择系统提供的图标，一级菜单生效</p>
      </el-form-item>
	  <el-form-item label="上传图标" :rules="[{required: true,message: '请选择图标'}]" :label-width="formLabelWidth">
	  	<div class="ww100">
	  		<el-button @click="chooseImg('upload_icon')">选择图片</el-button>
	  		<el-button v-if="formData.upload_icon" @click="deleteImg()">清空</el-button>
	  	</div>
	  	<div class="d-c">
	  		<img class="mt10" :src="formData.upload_icon" :width="40">
	  		<div class="gray">一级菜单上传图标有效，优先使用上传图标，建议上传尺寸为40px*40px</div>
	  	</div>
	  </el-form-item>
      <!--是否是菜单-->
      <el-form-item label="是否是菜单" :label-width="formLabelWidth" v-if="formData.is_route==1">
        <el-radio-group v-model="formData.is_menu">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--是否显示-->
      <el-form-item label="是否显示" :label-width="formLabelWidth">
        <el-radio-group v-model="formData.is_show">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--重定向-->
      <el-form-item label="重定向" :label-width="formLabelWidth" v-if="formData.is_route == 1">
        <el-input v-model="formData.redirect_name" autocomplete="off" placeholder="请输入重定向地址"></el-input>
      </el-form-item>
      <!--备注-->
      <el-form-item label="备注" prop="sort" :label-width="formLabelWidth">
        <el-input v-model="formData.remark" placeholder="请输入备注" type="textarea"></el-input>
      </el-form-item>
      <!--排序-->
      <el-form-item label="排序" prop="sort" :label-width="formLabelWidth">
        <el-input v-model="formData.sort" placeholder="请输入排序" type="number"></el-input>
      </el-form-item>
    </el-form>
    <!--操作按钮-->
	<template #footer>
		<el-button @click="dialogFormVisible">取 消</el-button>
		<el-button type="primary" @click="onSubmit()" :disabled="loading">确 定</el-button>
	</template>
	<!--上传图片-->
	<Upload v-if="isupload" :isupload="isupload" :type="type" :config="{ total: 1 }" @returnImgs="returnImgsFunc">
	</Upload>
  </el-dialog>
</template>

<script>
import {supplieraddpAccess} from '@/api/access.js';
import { deepClone,formatModel } from '@/utils/base.js';
import Upload from '@/components/file/Upload.vue';
export default {
	components: {
		Upload
	},
	data() {
		return {
			/*是否加载中*/
			loading: false,
			/*form表单数据对象*/
			formData: {
				/*菜单名称*/
				name: '',
				/*路由地址*/
				path: '',
				/*组件名*/
				views: '',
				/*别名*/
				alias: '',
				/*图标*/
				icon: '',
				/*是否是菜单*/
				is_menu: 0,
				/*是否是路由*/
				is_route: 1,
				/*是否显示*/
				is_show: 1,
				/*排序*/
				sort: 1,
				/*父集ID*/
				parent_id: 0,
				/*上传图标*/
				upload_icon: ''
			},
			/*验证规则*/
			formRules: {
				name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
				path: [{ required: true, message: '请输入路径', trigger: 'blur' }],
				views: [{ required: true, message: '请输入组件名称', trigger: 'blur' }],
				alias: [{ required: true, message: '请输入别名', trigger: 'blur' }]
			},
			/*当前父集ID*/
			parentsVal: [],
			/*菜单列表*/
			accessList: [],
			/*排序*/
			srot: '1',
			/*左边长度*/
			formLabelWidth: '120px',
			/*是否显示*/
			dialogVisible: false,
			/*展示数据*/
			propsParam: {
				label: 'name',
				value: 'access_id',
				checkStrictly: true
			},
			/*是否打开图片选择*/
			isupload: false,
			type: '',
		};
	},
	props: {
		open_add: Boolean,
		add_type: String,
		rawData: Array,
		selectModel: Object
	},
	created() {

		this.dialogVisible = this.open_add;
		this.accessList = deepClone(this.rawData);
		this.accessList.unshift({ name: '顶级菜单', access_id: 0 });
		if (this.add_type == 'copy') {
			this.formData =formatModel(this.formData,this.selectModel);
			this.findParentsID(this.accessList);
		} else if (this.add_type == 'child') {
			this.formData.parent_id = this.selectModel.access_id;
			this.findParentsID(this.accessList);
		}
	},
	methods: {
		/*选择图片*/
		chooseImg(e) {
			this.type = e;
			this.isupload = true;
		},
		/*关闭选择图片*/
		returnImgsFunc(e) {
			this.isupload = false;
			if (e != null && e.length > 0) {
				if (this.type == 'upload_icon') {
					this.formData.upload_icon = e[0].image;
				}
			}
		},
		deleteImg() {
			this.formData.upload_icon = '';
		},
		/*选择菜单*/
		handleChange(e) {},

		/*查找父集id*/
		findParentsID(list){
			let flag=false;
			for(let i=0;i<list.length;i++){
				let item=list[i];
				if(item.access_id==this.formData.parent_id){
					this.parentsVal.unshift(item.access_id);
					flag=true;
					break;
				}else{
					let children=item.children;
					if(typeof children!='undefined'&&children.length>0){
						if(this.findParentsID(children)){
							this.parentsVal.unshift(item.access_id);
							flag=true;
							break;
						}
					}
				}
			}
			return flag;
		},

		/*添加菜单*/
		onSubmit() {
			let self = this;
			let params = this.formData;
			if (self.parentsVal.length > 0) {
				params.parent_id = self.parentsVal[self.parentsVal.length - 1];
			}
			self.$refs.form.validate(valid => {
				if (valid) {
					self.loading = true;
					supplieraddpAccess(params)
						.then(res => {
							if (res.code == 1) {
								ElMessage({
									message: res.msg,
									type: 'success'
								});
								self.dialogFormVisible(true);
								self.loading = false;
							}
						})
						.catch(error => {
							self.loading = false;
						});
				}
			});
		},

		/*关闭弹窗*/
		dialogFormVisible(e) {
			if (e) {
				this.$emit('closeDialog', {
					type: 'success',
					openDialog: false
				});
			} else {
				this.$emit('closeDialog', {
					type: 'error',
					openDialog: false
				});
			}
		}
	}
};
</script>

<style></style>
